.date-picker {
  position: relative;
}

.date-picker-calender {
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 264px;
  padding: 20px;
  overflow: hidden;
  .rabbit {
    width: 80px;
    opacity: 0.2;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: -1;
  }
  .head {
    display: flex;
  }
  .body {
    margin-top: 20px;
    .days {
      display: flex;
      margin-bottom: 10px;
      .day {
        text-align: center;
        display: flex;
        justify-content: center;
        width: calc(100% / 7);
        font-size: 0.8rem;
      }
    }
    .dates {
      display: flex;
      flex-wrap: wrap;
      .disabled {
        .inner-date:hover {
          background-color: inherit !important;
          cursor: default;
        }
      }
      .date {
        text-align: center;
        margin-top: 2px;
        width: calc(100% / 7);
        display: flex;
        align-items: center;
        justify-content: center;
        .inner-date {
          cursor: pointer;
          font-size: 0.8rem;
          width: 32px;
          height: 32px;
          display: flex;
          border-radius: 50%;
          align-items: center;
          justify-content: center;
          border: 1px solid transparent;
          &:hover {
            background-color: rgba(#ddd, 0.8);
          }
        }
        .today {
          border: 1px solid #888;
        }
        .selected {
          color: #fff;
          background-color: rgba(#7a43e7, 0.6);
          &:hover {
            background-color: rgba(#7a43e7, 0.6);
          }
        }
      }

    }
  }
}